{{template "_head.html" .}}

<body ontouchstart="" >
<div style="width: 100%;height: 45px;background-color: #f8f8f8;border-bottom:1px solid #ddd">
    <a href="/"><span style="font-size: 32px;margin-left: 5%;"> < </span></a>
    <span style="font-size: 26px; margin-left: 10%;" id="num_title" > {{.room_name}} ( {{.count}}人 )</span>
</div>

<div id="show"></div>
<form >

    <div class="weui-uploader__input-box">
        <input id="sendimg" class="weui-uploader__input" type="file" accept="image/*">
    </div>

    <div class="weui-cells weui-cells_form" style="">
      <div class="weui-cell">
        <div class="weui-cell__bd">
          <textarea class="weui-textarea" id="msg" placeholder="请输入文本" rows="2"></textarea>
          <div class="weui-textarea-counter"><span>0</span>/200</div>
        </div>
      </div>
    </div>
    <div class="weui-flex" style="margin-top:21px;">
          <div class="weui-flex__item" >
              <a id="form" class="weui-btn weui-btn_plain-default" style="height: 38px;">发送</a>
          </div>
      </div>
</form>

{{template "_js.html" .}}
<script type="text/javascript">

var history_msg = "{{.history_msg}}"
var myname = "{{.user_name}}";
var roomname = "{{.room_name}}"

function History(){
    var history_msg_obj = JSON.parse(history_msg);
    for (var i = 0; i < history_msg_obj.length; i++){
        var msg_obj = JSON.parse(history_msg_obj[i]);
        if (myname == msg_obj["name"]){
            MyShow(msg_obj["data"], msg_obj["time"], msg_obj["head_img"]);
        }else{
            YouShow(msg_obj["data"], msg_obj["name"], msg_obj["time"], msg_obj["head_img"]);
        }
    }
}

window.onload = function () {
    History();
    var conn;
    var msg = document.getElementById("msg");

    $("#form").click(function () {
        if (!conn) {
            return false;
        }
        if (!msg.value) {
            return false;
        }
        conn.send(msg.value);
        msg.value = "";
        return false;
    });
    
    if (window["WebSocket"]) {
        var user_name = "{{.user_name}}";
        var room_name = "{{.room_name}}";
        conn = new WebSocket("ws://" + document.location.host + "/ws/room?room_name="+room_name+"&user_name="+user_name);
        conn.onclose = function (evt) {
            appendErr("<b>Connection closed. 连接断开</b>");
        };
        conn.onmessage = function (evt) {
            var messages = evt.data.split('\n');
            var obj = JSON.parse(messages);

            $("#num_title").empty();
            $("#num_title").append(room_name+" ( "+obj["count"]+"人 )")

            if (user_name == obj["name"]){
                MyShow(obj["data"], obj["time"], obj["head_img"]);
            }else{
                YouShow(obj["data"], obj["name"], obj["time"], obj["head_img"]);
            }
        };
    } else {
       appendErr("<b>你当前使用的浏览器不支持即使聊天，请更新或更换浏览器.</b>");
    }
};

$('#sendimg').change(function(evt){
    console.log("sendimg");
    // 如果浏览器不支持FileReader，则不处理
    if (!window.FileReader) return;
    var files = evt.target.files;
    console.log(files);
    console.log(files[0]["name"]);
    if (files.name == ""){
        return;
    }

    var f = event.target.files[0];

    var formdata=new FormData();
    formdata.append('file',f);
    formdata.append("myname", myname);
    formdata.append("roomname", roomname);
    formdata.append("type","room")

    console.log(formdata);
    $.ajax({
        url: "/upload",
        data: formdata,
　　　　 type: "POST",
        async: false,
　　　　 cache: false,
　　　　 contentType: false,
　　　　 processData: false,
        success: function (data) {

            console.log(data);
            if (data == ""){
                alert("添加失败");
            } 

        }
    })
});

</script>

</body>
</html>
